<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>能耗统计</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <style type="text/css">
    .el-aside {
      color: #333;
      padding: 10px;
    }
    .el-main {
      color: #333;
      text-align: center;
    }
    /* baidu map */
    /* body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} */
    #the_chart{width:100%;height:calc(100% - 45px);overflow: hidden;margin:0;font-family:"微软雅黑";}
  </style>  
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>  
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>

</head>
<body>
  <div id="app" v-cloak class="animated fadeInRight">
    <el-container>
      <el-aside width="400px" :style="{height:contentHeight+'px'}">
          <el-card class="box-card">
              <el-row type="flex" align="middle">
                <el-col :span="19">
                  <el-date-picker
                    v-model="intervalTime"
                    type="month"
                    size="small"
                    value-format="yyyy-MM-dd"
                    style="width:100%;font-size: 12px"
                    placeholder="选择月">
                  </el-date-picker>
                </el-col>
                <el-col :span="4" :offset="1">
                  <el-button type="primary" size="mini" @click="searchBattery" :disabled="!intervalTime">确定</el-button>
                </el-col>
              </el-row>
              <el-table :data="tripList"style="width: 100%" size="small" :height="contentHeight-180">
                <el-table-column prop="plateNo" label="车牌号"></el-table-column>
                <el-table-column prop="totalSocUse" label=" 总行程耗电量"  width="120">
                  <template slot-scope="scope">
                      <span style="color:#f0ad4e">{{scope.row.totalSocUse}}%</span>
                  </template>
                </el-table-column>
                <el-table-column prop="totalDriveMileage" label="总行驶里程" width="80">
                  <template slot-scope="scope">
                      <span style="color:#1ab394">{{scope.row.totalDriveMileage}}km</span>
                  </template>
                </el-table-column>
              </el-table>
              <div style="height:10px"></div>
              <el-pagination
                background
                small
                layout="prev, pager, next"
                @current-change="handleCurrentChangeBattery"
                :current-page.sync="tripChargeParam.page"
                :page-size="tripChargeParam.pageSize"
                :total="tripChargeList.totalCount">
              </el-pagination>
          </el-card>
      </el-aside>
      <el-main>
          <div id="the_chart"></div> 
      </el-main>
    </el-container>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:false,
          contentHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 37,
          tripChargeList:[],
          tripList:[],
          tripChargeParam:{
            page:1,
            pageSize:20
          },
          theEchart:null,
          optionChart:null,
          intervalTime:null,//时间选择
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.postTripCharge()
          this.initChart()
        })
      },
      methods: {
          // init 图表
          initChart:function(){
            var _this = this;
            setTimeout(function(){
              _this.chart = document.getElementById("the_chart")
              if(_this.chart.offsetWidth){
                _this.theEchart = echarts.init(_this.chart);
                _this.optionChart = {
                      title: {
                          // text: '平均百公里能耗soc百分比',
                          // left: 'left'
                      },
                      legend:{},
                      tooltip : {
                          trigger: 'axis',
                          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                          }
                      },
                      grid: {
                          left: '3%',
                          right: '4%',
                          bottom: '3%',
                          containLabel: true
                      },
                      xAxis : [
                          {
                              type : 'category',
                              data : [],
                              axisTick: {
                                  alignWithLabel: true
                              }
                          }
                      ],
                      yAxis : [
                          {
                            type : 'value',
                            name:"百公里平均能耗",
                            axisLabel: {
                                formatter: '{value}%'
                            }
                          },
                          {
                            type:'value',
                            name:"里程",
                            axisLabel: {
                                  formatter: '{value}km'
                              }
                          }
                      ],
                      series : [
                          {
                              name:'百公里能耗',
                              type:'bar',
                              barWidth: '60%',
                              color: ['#f0ad4e'],
                              data:[]
                          },
                          {
                            name:'总行驶里程',
                            type:'line',
                            yAxisIndex: 1,
                            color: ['#1ab394'],
                            smooth: true,
                            data:[]
                          }
                      ]
                }
                _this.theEchart.setOption(_this.optionChart);
              }else{
                _this.initChart()
              }
            },100)            
          },
          // 记录分页
          handleCurrentChangeBattery:function(){
            this.postTripCharge()
          },
          // 检索记录
          searchBattery:function(){            
            var time = this.intervalTime.split("-");
            var getTime = new Date(time[0],time[1],"0").getDate()
            this.tripChargeParam.startTime = this.intervalTime + " 00:00:00";
            time.splice(2,1,getTime);
            this.tripChargeParam.endTime = time.join("-") + " 23:59:59";

            this.tripChargeParam.page = 1
            this.postTripCharge()
          },
          // 请求信息数据
          postTripCharge:function(){
            var _this = this;
            var data = { 
              "page":this.tripChargeParam.page,
              "pageSize":this.tripChargeParam.pageSize,
              "startTime":this.tripChargeParam.startTime,
              "endTime":this.tripChargeParam.endTime
            }
            resourceRequst("/trip/queryTripDetailDataByTime",data,function(res){
              if(res.totalCount == 0) {
                _this.$message.error("没有充电记录！")
                _this.tripChargeList = []
                return
              }
              _this.tripChargeList = res
            })
          },
        },
      watch:{
        tripChargeList:function(res){
          var tripLists =[]
          _.each(res.TripTotalDataList,function(item){
            var tripItem = {}
            if(item.tripDetailDataDTO){
              tripItem = item.tripDetailDataDTO
            }else{
              tripItem = {
                averageSoc: 0,
                plateNo: item.vehicleInfo.plateNo,
                totalDriveMileage: 0,
                totalSocUse: 0,
                vin: item.vehicleInfo.vinCode,
              }
            }
            tripLists.push(tripItem)
          })
          this.tripList = tripLists
          // echarts 图表
          this.optionChart.series[0].data = _.map(tripLists,function(item){//soc
            return item.averageSoc
          });
          this.optionChart.series[1].data = _.map(tripLists,function(item){//总里程
            return item.totalDriveMileage
          });
          this.optionChart.xAxis[0].data = _.map(tripLists,function(item){//X坐标轴
            return item.plateNo
          })
          this.theEchart.setOption(this.optionChart);
        }
      }
    })
    window.onresize = function () {//重置容器高宽
        if(vm && vm.theEchart){
          vm.theEchart.resize();
        }
    };
  </script>
</html>